<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="./../template/WorkspaceTemplate.xhtml">

    <ui:define name="top">

    </ui:define>

    <ui:define name="left">

    </ui:define>

    <ui:define name="right">

    </ui:define>

    <ui:define name="content">
        <style>
            .ui-state-highlight.ui-selected {
                color: blueviolet;
            }
            .ui-commandButton-wizard-selected{
                font-weight: bold;
                color: #000000;
            }
            .ui-commandButton-wizard-unselected{
                font-weight: bold;
                color: #AFAFAF;
            }
        </style>

        <h:form id="purchaseOrderForm" style="font-size: 85%">

            <h2>Create Raw Material Purchase Order</h2>
            <br/>
            <p:commandButton styleClass="ui-commandButton-wizard-selected" value="Step 1: Select Vendor and Order Items" image="ui-icon ui-icon-circle-triangle-e" />
            <p:commandButton styleClass="ui-commandButton-wizard-unselected" value="Step 2: Confirm" image="ui-icon ui-icon-circle-triangle-e"/>
            <br/>
            <br/>
            <p:panel >
                <p:messages  />
                <br/>
                <br/>
                <h:panelGrid id="panelgrid1" columns="6" cellpadding="10" style="width: 100%">
                    <h:outputLabel style="font-weight: bold" value="Supplier ID: "/>
                    <h:outputText id="supplierId" style="font-weight: bold" value="#{rmpoManagerBean.rmpo.supplier.supplierId}"/>
                    <h:outputLabel style="font-weight: bold" value=""/>
                    <h:outputLabel value=""/>
                    <h:outputLabel style="font-weight: bold" value="Purchase Order Number: "/>
                    <h:outputLabel value="#{rmpoManagerBean.rmpo.poNum}"/>

                    <h:outputLabel style="font-weight: bold" value="Supplier Name: "/>
                    <p:inputText id="supplierName" value="#{rmpoManagerBean.rmpo.supplier.supplierName}" disabled="true" required="true" requiredMessage="Supplier needs to be selected"/>
                    <p:commandButton oncomplete="supplierDialog.show()" image="ui-icon ui-icon-search" title="Search"/>
                    <h:outputLabel style="font-weight: bold" value=""/>
                    <h:outputLabel style="font-weight: bold" value="Purchase Order Date: "/>
                    <h:outputText id="rfqNumber" value="#{rmpoManagerBean.rmpo.poDate}">
                        <f:convertDateTime pattern="MMMM dd, yyyy"/>
                    </h:outputText>

                    <h:outputLabel style="font-weight: bold" value="Currency: "/>
                    <h:selectOneRadio value="#{rmpoManagerBean.rmpo.currency}" required="true" requiredMessage="Currency is required.">
                        <f:selectItem itemValue="true" itemLabel="SGD"/>
                        <f:selectItem itemValue="false" itemLabel="USD"/>
                        <p:ajax update="purchaseOrderForm:items"/>
                    </h:selectOneRadio>
                    <h:outputLabel style="font-weight: bold" value=""/>
                    <h:outputLabel style="font-weight: bold" value=""/>
                    <h:outputLabel style="font-weight: bold" value=""/>
                    <h:outputLabel style="font-weight: bold" value=""/>

                </h:panelGrid>

                <br/>
                <br/>
                <br/>
                <h:outputText value="Order Items" style="font-weight: bold; font-size: 110%"/>
                <p:separator/> 
                <br/>
                <h:panelGrid columns="2" cellpadding="10">
                    <h:outputLabel style="font-weight: bold" value="Urgent: "/>
                    <h:selectBooleanCheckbox value="#{rmpoManagerBean.rmpo.urgent}"/>
                </h:panelGrid>
                <br/>
                <p:dataTable id="items" var="rec" rowIndexVar="row" value="#{rmpoManagerBean.rmpo.itemLines}" emptyMessage="No items added.">
                    <p:column headerText="S/N" >
                        <h:outputText value="#{row + 1}"/>
                    </p:column>
                    <p:column headerText="Raw Material Item">
                        <h:outputText value="#{rec.rawMaterialSupplyInformation.rawMaterial.name}"/>
                    </p:column>
                    <p:column>
                        <f:facet name="header">
                            Quantity <br/> (Lot Number)
                        </f:facet>
                        <h:outputText value="#{rec.qty}"/>
                    </p:column>
                    <p:column headerText="Unit Price (SGD)" rendered="#{rmpoManagerBean.rmpo.currency}">
                        <h:outputText value="#{rec.rawMaterialSupplyInformation.unitPriceSGD}">
                            <f:convertNumber type="currency"/>
                        </h:outputText>
                    </p:column>
                    <p:column rendered="#{rmpoManagerBean.rmpo.currency}">
                        <f:facet name="header">
                            Unit Price <br/> per Lot (SGD)
                        </f:facet>
                        <h:outputText value="#{rec.rawMaterialSupplyInformation.unitLotPriceSGD}">
                            <f:convertNumber type="currency"/>
                        </h:outputText>
                    </p:column>
                    <p:column headerText="Sub-total (SGD)" rendered="#{rmpoManagerBean.rmpo.currency}">
                        <h:outputText value="#{rec.subtotalSGD}">
                            <f:convertNumber type="currency"/>
                        </h:outputText>
                    </p:column>
                    <p:column headerText="Unit Price (USD)" rendered="#{!rmpoManagerBean.rmpo.currency}">
                        <h:outputText value="#{rec.rawMaterialSupplyInformation.unitPriceUSD}">
                            <f:convertNumber type="currency"/>
                        </h:outputText>
                    </p:column>
                    <p:column rendered="#{!rmpoManagerBean.rmpo.currency}">
                        <f:facet name="header">
                            Unit Price <br/> per Lot (USD)
                        </f:facet>
                        <h:outputText value="#{rec.rawMaterialSupplyInformation.unitLotPriceUSD}">
                            <f:convertNumber type="currency"/>
                        </h:outputText>
                    </p:column>
                    <p:column headerText="Sub-total (USD)" rendered="#{!rmpoManagerBean.rmpo.currency}">
                        <h:outputText value="#{rec.subtotalUSD}">
                            <f:convertNumber type="currency"/>
                        </h:outputText>
                    </p:column>
                    <p:column headerText="Options">
                        <p:commandButton title="Edit" image="ui-icon ui-icon-pencil" actionListener="#{rmpoManagerBean.editItemLine}" update="editItemForm" oncomplete="editItemDialog.show()">
                            <f:attribute name="selected" value="#{rec}"/>
                        </p:commandButton>
                        <p:commandButton title="Remove" image="ui-icon ui-icon-trash" actionListener="#{rmpoManagerBean.cancelEditItemLine}" oncomplete="confirmation.show()">
                            <f:attribute name="selected" value="#{rec}"/>
                        </p:commandButton>
                    </p:column>
                </p:dataTable>
                <br/>
                <br/>
                <div align="right">
                    <p:commandButton value="Add Order Items" image="ui-icon ui-icon-circle-plus" oncomplete="orderItemDialog.show()"/>
                </div>
                <br/>
                <br/>
                <br/>
                <br/>
                <h:outputText value="Comments" style="font-weight: bold; font-size: 110%"/>
                <p:separator/> 
                <br/>
                <h:panelGrid id="panelgrid4" columns="6" cellpadding="10">
                    <p:inputTextarea style="width:670px; height:70px;" effectDuration="400" value="#{rmpoManagerBean.rmpo.comments}"/><br/>
                </h:panelGrid>
                <br/>
            </p:panel>

            <br/>
            <br/>
            <div align="right">
                <p:commandButton value="Next" action="#{rmpoManagerBean.next()}" update="purchaseOrderForm"/>
            </div>
            <br/>
            <br/>
        </h:form>

        <p:dialog header="Search Supplier" widgetVar="supplierDialog" showEffect="fade" hideEffect="fade" resizable="false" modal="true" width="600">  
            <h:form id="supplierForm">
                <br/>
                <p:dataTable var="supplier" value="#{rmpoManagerBean.allSupplier}" emptyMessage="No supplier found with given criteria"  selection="#{rmpoManagerBean.rmpo.supplier}" selectionMode="single">

                    <p:column filterBy="#{supplier.supplierId}" 
                              headerText="Supplier Id"
                              filterMatchMode="contains">
                        <h:outputText value="#{supplier.supplierId}" />
                    </p:column>

                    <p:column filterBy="#{supplier.supplierName}" 
                              headerText="Supplier Name"
                              filterMatchMode="contains">
                        <h:outputText value="#{supplier.supplierName}" />
                    </p:column>

                </p:dataTable>
                <br/>
                <br/>
                <div align="right">
                    <p:commandButton value="Select Supplier" update="purchaseOrderForm:supplierId purchaseOrderForm:supplierName rawMaterialForm orderItemForm" oncomplete="supplierDialog.hide()"/>
                </div>
                <br/>
            </h:form>
        </p:dialog>
        
        
        <p:dialog id="orderItemDialog" header="Add Order Items" widgetVar="orderItemDialog" showEffect="fade" hideEffect="fade" resizable="false" modal="true" width="600" closable="false">  
            <h:form id="orderItemForm">
                <br/>
                <p:messages/>
                <h:panelGrid columns="3" cellpadding="10">
                    <h:outputLabel style="font-weight: bold" value="Raw Material Item: "/>
                    <p:inputText id ="rawMaterial" size="40" value="#{rmpoManagerBean.rmil.rawMaterialSupplyInformation.rawMaterial.name}" disabled="true" required="true" requiredMessage="Raw material is required"/>
                    <p:commandButton oncomplete="rawMaterialDialog.show()" image="ui-icon ui-icon-search" title="Get Raw Material" update="rawMaterialForm"/>
                    
                    <h:outputLabel style="font-weight: bold" value="Lot Size: "/>
                    <h:outputText value="#{rmpoManagerBean.rmil.rawMaterialSupplyInformation.rawMaterial.lotSize}"/>
                    <h:outputLabel value=""/>
                    
                    <h:outputLabel style="font-weight: bold" value="Lead Time: "/>
                    <h:outputText value="#{rmpoManagerBean.rmil.rawMaterialSupplyInformation.rawMaterial.leadtime}"/>
                    <h:outputLabel value=""/>
                    
                    <h:outputLabel style="font-weight: bold" value="Quantity (Lot Number): "/>
                    <p:inputText value="#{rmpoManagerBean.rmil.qty}"/>
                    <h:outputLabel value=""/>
                </h:panelGrid>
                
                <br/>
                <br/>
                <div align="right">
                    <p:commandButton value="Cancel" actionListener="#{rmpoManagerBean.cancelAddItemLine}" update="purchaseOrderForm:items rawMaterialForm orderItemForm" oncomplete="orderItemDialog.hide()"/>
                    <p:commandButton value="Add Item" update="purchaseOrderForm:items rawMaterialForm orderItemForm" actionListener="#{rmpoManagerBean.addItemLine}" oncomplete="handleAddOrderItem(xhr, status, args)"/>
                </div>
                <br/>
                
            </h:form>
        </p:dialog>
        
        <script type="text/javascript">  
            function handleAddOrderItem(xhr, status, args) {
                if(!args.valid) {  
                    jQuery('#orderItemDialog').parent().effect("shake", { times:3 }, 100);
                } else {
                    orderItemDialog.hide();
                }
            }
        </script>
        
        <p:dialog header="Search Raw Material" widgetVar="rawMaterialDialog" showEffect="fade" hideEffect="fade" resizable="false" modal="true" width="600">
            <h:form id="rawMaterialForm">
                <br/>
                <p:dataTable var="rawMaterial" value="#{rmpoManagerBean.supplierRawMaterial}" emptyMessage="No raw material found with given criteria"  selection="#{rmpoManagerBean.rmil.rawMaterialSupplyInformation}" selectionMode="single">
                    
                    <p:column filterBy="#{rawMaterial.rawMaterial.name}" 
                              headerText="Raw Material"
                              filterMatchMode="contains">
                        <h:outputText value="#{rawMaterial.rawMaterial.name}" />
                    </p:column>

                    <p:column filterBy="#{rawMaterial.rawMaterial.lotSize}" 
                              headerText="Lot Size"
                              filterMatchMode="contains">
                        <h:outputText value="#{rawMaterial.rawMaterial.lotSize}" />
                    </p:column>
                    
                    <p:column filterBy="#{rawMaterial.rawMaterial.leadtime}" 
                              headerText="Lead Time"
                              filterMatchMode="contains">
                        <h:outputText value="#{rawMaterial.rawMaterial.leadtime}" />
                    </p:column>
                
                </p:dataTable>
                <br/>
                <br/>
                <div align="right">
                    <p:commandButton value="Select Raw Material" update="orderItemForm editItemForm:rawMaterialEdit" oncomplete="rawMaterialDialog.hide()"/>
                </div>
                <br/>
            </h:form>
        </p:dialog>
        
        <p:dialog id="editItemDialog" header="Edit Order Items" widgetVar="editItemDialog" showEffect="fade" hideEffect="fade" resizable="false" modal="true" width="600" closable="false">  
            <h:form id="editItemForm">
                <br/>
                <p:messages/>
                <h:panelGrid columns="3" cellpadding="10">
                    <h:outputLabel style="font-weight: bold" value="Raw Material Item: "/>
                    <p:inputText size="40" value="#{rmpoManagerBean.rmil.rawMaterialSupplyInformation.rawMaterial.name}" disabled="true" required="true" requiredMessage="Raw material is required"/>
                    <p:commandButton oncomplete="rawMaterialDialog.show()" image="ui-icon ui-icon-search" title="Get Raw Material" update="rawMaterialForm"/>
                    
                    <h:outputLabel style="font-weight: bold" value="Lot Size: "/>
                    <h:outputText value="#{rmpoManagerBean.rmil.rawMaterialSupplyInformation.rawMaterial.lotSize}"/>
                    <h:outputLabel value=""/>
                    
                    <h:outputLabel style="font-weight: bold" value="Lead Time: "/>
                    <h:outputText value="#{rmpoManagerBean.rmil.rawMaterialSupplyInformation.rawMaterial.leadtime}"/>
                    <h:outputLabel value=""/>
                    
                    <h:outputLabel style="font-weight: bold" value="Quantity: "/>
                    <p:inputText value="#{rmpoManagerBean.rmil.qty}"/>
                    <h:outputLabel value=""/>
                </h:panelGrid>
                
                <br/>
                <br/>
                <div align="right">
                    <p:commandButton value="Cancel" update="purchaseOrderForm:items rawMaterialForm editItemForm orderItemForm" actionListener="#{rmpoManagerBean.cancelEditItemLine}" oncomplete="editItemDialog.hide()"/>
                    <p:commandButton value="Update Item" update="purchaseOrderForm:items rawMaterialForm editItemForm orderItemForm" actionListener="#{rmpoManagerBean.updateItemLine}" oncomplete="handleEditOrderItem(xhr, status, args)"/>
                </div>
                <br/>
                
            </h:form>
        </p:dialog>
        
        <script type="text/javascript">  
            function handleEditOrderItem(xhr, status, args) {
                if(!args.valid) {  
                    jQuery('#editItemDialog').parent().effect("shake", { times:3 }, 100);
                } else {
                    editItemDialog.hide();
                }
            }
        </script>
        
        <p:confirmDialog message="Delete item line?" width="200"  
                         showEffect="fade" hideEffect="fade"  
                         header="Confirm" severity="alert" widgetVar="confirmation">  
            <h:form id="confirm">
                <p:commandButton value="Yes" actionListener="#{rmpoManagerBean.confirmRemoveItemLine}" update="purchaseOrderForm:items rawMaterialForm editItemForm orderItemForm" oncomplete="confirmation.hide()"/>  
                <p:commandButton value="No" actionListener="#{rmpoManagerBean.cancelRemoveItemLine}" oncomplete="confirmation.hide()"/>  
            </h:form>
        </p:confirmDialog>
        
    </ui:define>

    <ui:define name="bottom">

    </ui:define>

</ui:composition>